<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        tooltip: { trigger: "axis" },
        color: ["#86c9c4", "#719acf"],
        legend: { right: "10%", icon: "roundRect", itemHeight: 4 },
        grid: { left: "10%", top: "30", right: "5%", bottom: "30" },
        xAxis: {
            type: "category",
            axisTick: { show: false },
            axisLine: { show: false },
            data: ["1月", "2月", "3月", "4月", "5月"] as string[],
        },
        yAxis: {
            type: "value",
            axisLine: { show: false },
            splitLine: { show: false },
        },
        series: [
            {
                name: "去年产量",
                type: "line",
                smooth: true,
                symbol: "none",
                data: [201, 751, 812, 1662, 2502] as number[],
            },
            {
                name: "今年产量",
                type: "line",
                smooth: true,
                symbol: "none",
                data: [324, 648, 972, 1944, 2592] as number[],
            },
        ],
    },
};
const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    chart.instance = echarts.init(oChart.value);
    chart.instance.setOption(chart.option);
});
</script>

<template>
    <section>
        <cite>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-earth-full"></use></svg>
            <h1>产量对比</h1>
        </cite>
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
